
// 通过node中的模块操作，向外暴露一个配置对象
const path = require('path')
const webpack = require('webpack')//第二步
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 导入在内存中生成html的页面
// 只要是插件，就一定要放到plugins节点中去
// 作用
//  自动在内存中根据指定页面生成一个内存的页面
// 自动把打包好的bundle.js 追加到页面中去
const htmlWebpackagePlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: {//devserver的第二种配置方式  第一步
        open: true,
        port: 3000,
        contentBase: 'src',
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),//第三步
        new htmlWebpackagePlugin({//创建生成html的插件
            template: path.join(__dirname, './src/index.html'),//指定页面模板，将来根据指定路径去生成内存页面
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            //配置处理css的模块   调用规则，所有loader从右到左
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            //配置处理less的模块   调用规则，所有loader从右到左
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            //配置处理scss的模块   调用规则，所有loader从右到左
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: 'url-loader?limit=1000000&name=[hash]-[name].[ext]'
            }
            ,//配置处理图片路径的模块   调用规则，所有loader从右到左limit限制大小，name确保使用原来的名字
            {
                test: /\.(ttf|eot|svg|woff|woff2|otf)$/,
                use: 'url-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            //配置处理字体文件路径的模块   调用规则，所有loader从右到左limit限制大小，name确保使用原来的名字
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    resolve: {
        alias: {
            // "vue$":"vue/dist/vue.js"
        }
    }
}
/**
 *
 * 当我们在 控制台直接输入 webpack 命令执行时，webpack做了以下几步：
 * 1.webpack发现没有通过命令指定入口和出口
 * 2.去项目的根目录找webpack.config.js 的配置文件
 * 3.解析配置文件，得到导出的node配置对象
 * 4.拿到配置对象后，就得到了配置对象中的入口和出口。然后打包构建
 */